<template>
  <div class="step-content">
    <h3>{{ identityText }}功能介绍</h3>
    <p class="tip">了解您所选身份的主要功能</p>

    <IdentityCarousel
        :images="identityImages"
        :titles="carouselTitles"
        :captions="carouselCaptions"
    />

    <IdentityFeatureCard
        :title="`${identityText}功能`"
        :features="identityFeatures"
    />

    <div class="step-buttons">
      <el-button @click="$emit('prev')">上一步</el-button>
      <el-button type="primary" @click="$emit('next')">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import IdentityCarousel from '@/views/Guide/components/IdentityCarousel.vue'
import IdentityFeatureCard from '@/views/Guide/components/IdentityFeatureCard.vue'

defineProps({
  identityText: String,
  identityImages: Array,
  carouselTitles: Array,
  carouselCaptions: Array,
  identityFeatures: Array,
  selectedIdentity: {
    type: Number,
    default: 0
  }
})
defineEmits(['prev', 'next'])
</script>
